<template>
  <n-card
    class="card-wrapper"
    :segmented="true"
    hoverable
    title="本文主要展示一些在开发过程中的常见问题"
  >
    <div class="content">
      <div
        v-for="(item, index) of questionList"
        :key="index"
        class="content-wrapper"
      >
        <div class="q-title">
          <span>{{item.title}}</span>
        </div>
        <div
          class="q-content"
          v-html="item.content"
        >
        </div>
      </div>
    </div>
  </n-card>
</template>

<script lang="ts" setup>
const questionList = [
  {
    title: "我是一个后端开发人员，可不可以使用这个框架？",
    content: `如果您对前端知识一点也不了解，或者只使用过 JQuery、HTML、CSS，那建议去找一个有基础的前端开发人员一起去工作,
      否则开发起来会挺麻烦`,
  },
  {
    title:
      "我是一个刚接触前端不久有开发人员，想通过这个框架进行学习，是否可以？",
    content: `完全没有问题，如果您有一颗不断学习进取的心，我们将以最大的热情去带给您更多的知识`,
  },
  {
    title: "为什么项目运行不起来，或者说运行起来是一个空白页?",
    content: `一般来说这样的问题是没有安装依赖或者没有正确执行运行命令造成的。
          1、 首先要检查依赖是否安装成功，没有安装依赖的话，根目录下面是没有 node_modules 文件夹的。
              这个时候要先执行 npm install 或者 npm i 来进行安装第三方依赖
          2、如果依赖已经正确安装了，要检查运行命令是否正确。
              开发的话正确的运行命令是：npm run dev
              而不是 npm run serve 或者 其它的命令
              发版的话正确的运行命令是：npm run build`,
  },
  {
    title: "为什么接口调用不成功？",
    content: `这个问题的原因比较多，大体的有两个地方：
          - 在浏览器的控制台中没有看到发送请求
          - 接口报错了，没有看到具体的打印信息
          - 跨域了
      1、如果没有看到具体的发送请求，请检查一下 main.ts 中是否把 mock 注释了。
          因为此框架是一款纯前端的框架，没有对接具体的后台接口，
          所以页面中的数据都是采用mockjs进行模拟的
          因此，在对接真实的接口之前，请一定要把 mock 注释了
          具体操作也比较简单：
          1、打开 main.ts
          2、找到  import '../mock'  代码，注释了就好

      2、如果接口报错了，或者没有打印任何返回值。请和后台人员商量一下具体的信息，如下：
          1、检查接口地址、接口名是否写对了
          2、请求方式 GET or POST
          3、具体返回的 code 码，是怎么样的。框架默认正确码是 200

      3、跨域是一个老生长谈的问题，相信每个前端开发者都会遇到这个问题
          我们推荐解决这个问题的唯一操作就是: CORS。
          让后台开发人员去配置，前端人员不要做配置，不要设置代理。
          代理只能在开发阶段中使用，真正上线后还是不能使用
          所以让后台配置是最好的办法`,
  },
  {
    title: "拿到了项目，我该怎么去开发，或者说如何下手开发？",
    content: `我们建议拿到源码后，要看一下源码结构，做到心中有数
其次要把源码运行起来，这样可以检查电脑环境是否正确。
如果成功运行了，说明电脑环境配置没有问题，这个时候就可以真正的去开发
我们建议首先从 登录页面 进行开发。因为：
    1、登录页面比较简单
    2、代码干预比较少
    3、通过 登录接口 和后台调通接口
    当然在对接接口的时候一定要把 mock代码 给注释了。否则 mock 会把请求拦截
对于后台管理系统来说也只有用户登录了才能往下继续进行操作。`,
  },
  {
    title: "mock 代码了注释，没法获取菜单数据了，可没法看页面了？",
    content: `如果把 mock 注释了，这个时候接口是不会正常工作的，所以主页面肯定加载不了
这个时候要在浏览器手输入一下地址：http://xxxxx/#/login
这个时候就会把登录页面显示出来，就可以继续 对接 接口了。
如果能正确的 调用 登录接口 说明和后台基本对接成功了。
就可以继续对接 其它接口 比如：根据用户角色获取不同菜单的 菜单接口。
菜单接口是最重要的接口，只有有正确的菜单数据才能让项目正确运行`,
  },
];
</script>


<style scoped lang="scss">
@media screen and (max-width: 960px) {
  .card-wrapper {
    width: 90% !important;
  }
}
.card-wrapper {
  width: 70%;
  margin: 20px auto;
  box-shadow: var(--box-shadow);
  .content {
    .content-wrapper {
      .q-title {
        display: flex;
        align-items: center;
        color: var(--text-color);
        font-size: 16px;
        font-weight: bold;
        &::before {
          content: "";
          display: inline-block;
          width: 7px;
          height: 7px;
          border-radius: 50%;
          margin-right: 10px;
          background-color: var(--text-color);
        }
        & > span {
          flex: 1;
        }
      }
      .q-content {
        margin-top: 15px;
        border-radius: 5px;
        background-color: var(--content-bg-color);
        padding: 10px;
        font-size: 14px;
        line-height: 30px;
        white-space: pre;
        overflow: auto;
      }
      &::after {
        content: "";
        display: block;
        margin: 20px 0;
        border-bottom: 1px dashed #f5f5f5;
      }
    }
  }
}
</style>